<!--
    设置
-->
<template>
	<div class="container container-all">
		<div class="margin-neg main-box">
			<div class="setting-box">
				<Form ref="seting" :model="form" :rules="setRule" :label-width="80" class="form">
					<FormItem label="刷新间隔" prop="time" class="time-item">
						<Input :min="1" v-model="form.time" size="small" placeholder="数据刷新间隔"></Input>
						<span>分</span>
					</FormItem>
					<FormItem class="save-item">
						<Button type="primary" @click="saveHandle" :disabled="btnState"
							:icon="btnState ? 'ios-loading' : ''">确定</Button>
						<Button @click="restHandle" style="margin-left: 10px">重置</Button>
						<Button @click="clear" style="margin-left: 10px">清除</Button>
					</FormItem>
				</Form>
			</div>
		</div>
	</div>
</template>

<script>
const retime = localStorage.getItem('retime')
export default {
	data() {
		const regTime = (rule, value, callback) => {
			if (!value) {
				callback(new Error('不能为空'))
			} else if (!/^[0-9]*$/.test(value)) {
				callback(new Error('必须为数字'))
			} else if (value < 1) {
				callback(new Error('不能小于1分钟'))
			} else {
				callback()
			}
		}
		return {
			btnState: false, // 按钮状态
			form: {
				time: retime ? retime / 1000 / 60 : '', // 刷新时间
			},
			setRule: {
				time: [
					{ required: true, validator: regTime, trigger: 'change' },
				]
			}
		}
	},
	methods: {
		// 保存
		saveHandle() {
			this.btnState = true
			this.$refs['seting'].validate((valid) => {
				if (valid) {
					localStorage.setItem('retime', this.form.time * 60 * 1000)
				} else {
					this.$Message.error('请检查表单！')
				}
				this.btnState = false
				this.$Message.success('设置成功')
			})
		},
		// 重置
		restHandle() {
			this.$refs['seting'].resetFields()
		},
		// 清除
		clear() {
			localStorage.removeItem('retime')
		}
	}
}
</script>

<style lang="less" scoped>
@import '../assets/css/base';

.main-box {
	height: 100%;
	margin: 0;
}

@import '../assets/css/home';

.setting-box {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.form .time-item /deep/ .ivu-form-item-content {
	display: flex;
	justify-content: space-between;
	align-items: center;

	>span {
		margin-left: 10px;
	}
}

.save-item /deep/ .ivu-icon-ios-loading {
	animation: rotate 3s linear infinite;
}</style>
